<template>
  <div class="my-page">


    <!-- 用户基本信息 -->
    <el-card shadow="never" class="info-card">
      <template #header>
        <div class="card-header">基本信息</div>
      </template>

      <el-form label-position="left" :model="userInfo" label-width="100px" class="form">
        <!-- 用户昵称 -->
        <el-form-item label="用户昵称">
          <span>{{ userInfo.nickname }}</span>
        </el-form-item>

        <!-- 用户ID -->
        <el-form-item label="用户ID">
          <span>{{ userInfo.userId }}</span>
        </el-form-item>

        <!-- 性别 -->
        <el-form-item label="性别">
          <span>{{ userInfo.gender }}</span>
        </el-form-item>

        <!-- 个人简介 -->
        <el-form-item label="个人简介">
          <span>{{ userInfo.bio }}</span>
        </el-form-item>

        <!-- 所在地区 -->
        <el-form-item label="所在地区">
          <span>{{ userInfo.region }}</span>
        </el-form-item>

        <!-- 地址管理 -->
        <el-form-item label="地址管理">
          <el-button type="text" @click="addAddress" class="add-address-btn"
          >+ 新增收货地址</el-button
          >
        </el-form-item>

        <!-- 出生日期 -->
        <el-form-item label="出生日期">
          <span>{{ userInfo.birthDate }}</span>
        </el-form-item>

        <!-- 开始工作 -->
        <el-form-item label="开始工作">
          <span>{{ userInfo.workStart }}</span>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 教育信息 -->
    <el-card shadow="never" class="info-card">
      <template #header>
        <div class="card-header">教育信息</div>
      </template>

      <el-form label-position="left" :model="eduInfo" label-width="100px" class="form">
        <!-- 学校名称 -->
        <el-form-item label="学校名称">
          <span v-if="!eduInfo.school" class="placeholder">未填写</span>
          <span v-else>{{ eduInfo.school }}</span>
        </el-form-item>

        <!-- 专业 -->
        <el-form-item label="专业">
          <span v-if="!eduInfo.major" class="placeholder">未填写</span>
          <span v-else>{{ eduInfo.major }}</span>
        </el-form-item>

        <!-- 入学时间 -->
        <el-form-item label="入学时间">
          <span v-if="!eduInfo.enrollDate" class="placeholder">未选择</span>
          <span v-else>{{ eduInfo.enrollDate }}</span>
        </el-form-item>

        <!-- 学历 -->
        <el-form-item label="学历">
          <span v-if="!eduInfo.degree" class="placeholder">未选择</span>
          <span v-else>{{ eduInfo.degree }}</span>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 用户基本信息
const userInfo = ref({
  nickname: '雀山的明神',
  userId: 'yls1997',
  gender: '男',
  bio: '为一人痴狂,血液布满大地,坐拥亿万修罗,只为你执掌江山...',
  region: '北京-北京市',
  birthDate: '1949-10-01',
  workStart: '2019-10'
});

// 教育信息
const eduInfo = ref({
  school: '', // 未填写
  major: '', // 未填写
  enrollDate: '', // 未选择
  degree: '' // 未选择
});

// 返回按钮点击事件
const onBack = () => {
  console.log('返回上一页');
  // 实际项目中可以使用 router.back()
};

// 添加地址事件
const addAddress = () => {
  console.log('添加新地址');
  // 打开地址添加弹窗或跳转到地址管理页面
};
</script>

<style scoped>
.my-page {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.page-header {
  margin-bottom: 20px;
}

.info-card {
  margin-bottom: 20px;
  border-radius: 8px;
}

.card-header {
  font-weight: 600;
  font-size: 16px;
  color: #333;
}

.form :deep(.el-form-item) {
  margin-bottom: 16px;
}

.form :deep(.el-form-item__label) {
  color: #666;
  font-weight: 500;
}

.form :deep(.el-form-item__content) {
  line-height: 1.5;
}

.add-address-btn {
  color: #1e80ff;
  padding-left: 0;
}

.add-address-btn:hover {
  color: #0066cc;
}

.placeholder {
  color: #999;
  font-style: italic;
}
</style>
